<template>
	<view class="container">
		<view class="main">
			<view v-if="!state.addresses.length" class="no-address-tips">
				<view class="mb-30">暂无地址信息</view>
				<view>请点击底部按钮添加地址信息</view>
			</view>
			<template v-else>
				<uni-swipe-action>
					<uni-swipe-action-item class="address-wrapper" v-for="(address, index) in state.addresses" :key="index">
						<view class="address" @tap="chooseAddress(address)">
							<view class="left flex-fill overflow-hidden mr-20">
								<view class="font-size-lg font-weight-bold text-truncate" style="margin-bottom: 10rpx">{{ address.address }}</view>
								<view class="font-size-sm text-color-assist">{{ address.name }} {{ address.sex == 1 ? '先生' : '女士' }} {{ address.phone }}</view>
							</view>
							<image src="/static/images/edit.png" class="edit-icon" @tap.stop="edit(address)"></image>
						</view>
						<template #right>
							<view class="del" @click="handleSwipeClick(address.id, index)"><text>删除</text></view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</template>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="add">新增地址</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { state, setAddresses, setEditAddress, setAddress } from '../../store/user';
import getAddress from '../../vendor/address/Address';
import { addressInit } from '../../vendor/address/Address';
const { list, getList, del } = getAddress();

if (!state.addresses.length) {
	getList(() => {
		setAddresses(list.value);
	});
}

function add() {
	setEditAddress(null);
	uni.navigateTo({
		url: '/pages/user/add_address'
	});
}
function edit(address) {
	setEditAddress(address);
	uni.navigateTo({
		url: '/pages/user/add_address'
	});
}
function handleSwipeClick(id, index) {
	uni.showModal({
		title: '提示',
		content: '确定要删除？',
		success: (res) => {
			if (res.confirm) {
				del(id, () => {
					// 判断删除的是否是当前选择的地址
					state.addresses.some((item) => {
						if (item.id == state.address.id) {
							setAddress(addressInit);
							return true;
						}
					});

					state.addresses.splice(index, 1);
					uni.showToast({ title: '删除成功！', icon: 'success' });
				});
			}
		}
	});
}
function chooseAddress(address) {
	setAddress(address);
	uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
}

.main {
	width: 100%;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	padding-bottom: 100rpx;

	.address-wrapper {
		margin-bottom: 30rpx;
	}

	.address {
		width: 100%;
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		.edit-icon {
			width: 50rpx;
			height: 50rpx;
			flex-shrink: 0;
		}
	}
}

.btn-box {
	height: 150rpx;
	background-color: #ffffff;
	box-shadow: 0 0 20rpx rgba($color: $text-color-assist, $alpha: 0.1);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;

	button {
		height: 80rpx;
		width: 80%;
		border-radius: 50rem !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.del {
	background: #cb2c27;
	width: 90px;
	line-height: 90px;
	color: white;
	text-align: center;
	font-size: $uni-font-size-lg;
}
.btn {
	text-align: center;
	color: white;
	line-height: 50px;
	height: 50px;
	width: 80%;
	margin: 30px auto;
	border-radius: 30px;
	background: #a5d63f;
}
</style>
